<template>
  <div>
    <!--  --> 
    <el-input v-model="input"  placeholder="请输入想要预测的股票代码" />
    <br />
    <br />
    <el-input v-model="input2"  placeholder="请输入该股票数据集获取的开始时间" />
    <br />
    <br />
    <el-input v-model="input3"  placeholder="请输入该股票数据集获取的结束时间" />
    <base-wrapper class="flex-center-center">
      <el-button @click="handleClick" type="success">开始预测</el-button>
    </base-wrapper>
    <el-input v-model="input4" placeholder="预测出下一次的股票价格为" />
    <br />
    <br />
    <base-wrapper class="flex-center-center">
      <el-link type="primary" href="http://localhost:63342/stock-predict/stock_predict/stock/stock_prediction_html/stock_prediction.html?_ijt=fnque6elf9g7bqi5g6v3q85he5&_ij_reload=RELOAD_ON_SAVE" target="_blank">预测生成的折线图</el-link>
    </base-wrapper>
  </div>
</template>

<style scoped>
.el-link {
  margin-right: 50px;
}

</style>

.el-link {
  margin-right: 8px;
}
<script setup>
import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const input = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref()

async function handleClick() {
  // console.log(input)
  // console.log(input2)
  // console.log(input3)
  var res = await proxy.$api.lstm.postData(input.value,input2.value,input3.value);
  input4.value = res.data

}

let option = computed(() => {
  return {
    title: {
      text: "股票预测",  //文本
      //文本样式设置
      textStyle: {
        color: "#333333",  //颜色
        fontSize: 20,  //字体大小
      },
      //位置
      left: "center",
      top: "0"
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: data.value.map(d => d.date)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.value.map(d => d.value),
        type: 'line'
      }
    ]
  }
})


</script>

<style scoped>
.chart {
  height: 400px;
}
</style>